<template>
  <div class="article-page" :class="{ mobile: isMobile }">
    <article class="article" v-if="!fetching">
      <h3 class="title">{{ article.title }}</h3>
      <div class="article-meta">
        <span v-if="article.created_time">
          <i class="iconfont icon-time" />
          {{ article.created_time | dateFormat }}
        </span>
        <span>
          <i class="iconfont icon-eye" />
          {{ article.views }}
        </span>
        <span>
          <i class="iconfont icon-comment" />
          {{ article.comments }}
        </span>
        <span>
          <i class="iconfont icon-dianzan" />
          {{ article.likes }}
        </span>
      </div>
      <div class="article-content" v-html="articleContent" />
    </article>
    <article class="article" v-else>
      <div class="skeleton" key="skeleton">
        <skeleton-line class="title" />
        <skeleton-paragraph class="content" :lines="9" line-height="1.2em" />
      </div>
    </article>

    <comment :article-id="articleId" :likes="article.likes"></comment>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Comment from '@/components/comment'
import marked from '@/plugins/marked'
import SkeletonLine from '@/components/skeleton/line'
import SkeletonBase from '@/components/skeleton/base'
import SkeletonParagraph from '@/components/skeleton/paragraph'
export default {
  name: 'Detail',
  components: {
    Comment,
    SkeletonLine,
    SkeletonBase,
    SkeletonParagraph,
  },
  validate({ params }) {
    return params.id && !isNaN(Number(params.id))
  },
  fetch({ store, params, error }) {
    return Promise.all([
      store
        .dispatch('article/getArticleDetail', params)
        .catch((err) => error({ statusCode: 404 })),
      ,
      store.dispatch('comment/fetchList', { article_id: params.id }),
    ])
  },
  head() {
    const { article } = this
    const a = article.keywords ? article.keywords.join(',') : article.title
    return {
      title: article.title || '...',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content:
            (article.keywords ? article.keywords.join(',') : article.title) ||
            '',
        },
        {
          hid: 'description',
          name: 'description',
          content: article.description,
        },
      ],
    }
  },
  computed: {
    ...mapState({
      article: (state) => state.article.detail.data,
      fetching: (state) => state.article.detail.fetching,
      isMobile: (state) => state.global.isMobile,
    }),
    articleId() {
      return Number(this.$route.params.id)
    },
    articleContent() {
      const { content } = this.article
      if (!content) return ''
      return marked(content, true)
    },
  },
}
</script>

<style lang="scss" scoped>
.article-page {
  .article {
    padding: 15px;
    background-color: #fff;
    border-radius: 6px;
    .skeleton {
      .title {
        width: 60%;
        height: 26px;
        margin: 2rem auto;
      }
      .content {
        margin-top: 3rem;
        margin-bottom: 1rem;
      }
    }
    .title {
      padding: 10px 0;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #e9eaed;
      text-align: center;
      color: #999;
      span {
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
}
</style>

<style lang="scss">
.article-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 1rem 0;
    line-height: 1.8em;
    font-weight: 700;
    text-indent: 0;
  }
  p {
    line-height: 2.2em;
    text-indent: 2em;
    margin-bottom: 1em;
  }
  pre {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 1em;
    padding-left: 3rem;
    font-size: 13.3px;
    background-color: rgba(0, 0, 0, 0.8);
    &::before {
      content: attr(data-lang) ' CODE';
      display: block;
      color: #fff;
      height: 30px;
      line-height: 30px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      font-weight: 700;
      background-color: rgba(68, 68, 68, 0.9);
      text-transform: uppercase;
      text-align: center;
    }
    .code-lines {
      position: absolute;
      left: 0;
      top: 30px;
      margin: 0;
      padding: 9px 0;
      width: 3rem;
      // height: calc(100% - 30px);
      text-align: center;
      color: #555;
      background-color: rgba(0, 0, 0, 0.2);
      .code-line-number {
        position: relative;
        padding: 0;
        list-style-type: none;
        line-height: 30px;
        font-size: 12.432px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: none;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 3rem;
          width: 66em;
          height: 100%;
          background-color: hsla(0, 0%, 60.4%, 0.2);
          opacity: 0;
          visibility: hidden;
        }
        &:hover::before {
          opacity: 1;
          visibility: visible;
        }
        &:hover {
          background-color: hsla(0, 0%, 100%, 0.6);
        }
      }
    }
    code[class*='language-'] {
      display: block;
      float: left;
      margin: 0;
      padding: 9px 0;
      width: 100%;
      height: 100%;
      line-height: 30px;
      color: hsla(0, 0%, 100%, 0.87);
      background-color: transparent;
      overflow: auto;
    }
  }

  img {
    // max-width: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    display: block;
    text-align: center;
    border-radius: 2px;
    border: 0.618rem solid hsla(0, 0%, 77.3%, 0.5);
    opacity: 0.9;
    cursor: pointer;
    box-sizing: border-box;
  }
  ol,
  ul {
    margin-bottom: 1em;
    padding-left: 3em;
    vertical-align: baseline;
    li {
      line-height: 1.8em;
      padding: 0.5em 0.8em;
      &:hover {
        background-color: hsla(0, 0%, 77.3%, 0.5);
      }
    }
  }
}
</style>
